@import "../style/typography";
@import "../style/spacing";
@import "./radio-sizes";

.RadioGroup {
}

.RadioButton {
    display: inline-block;

    &__label {
        padding: 0; // FIXME LATER
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        vertical-align: middle;
    }

    &__container {
        display: inline-block;
        position: relative;
        width: $radio-size;
        height: $radio-size;
        // The radio container is inside of a inline-flex element and may shrink if the label
        // is wide and text-wrapping is enabled.
        flex-shrink: 0;
    }

    &__outerCircle {
        box-sizing: border-box;
        left: 0;
        position: absolute;
        top: 0;
        width: $radio-size;
        height: $radio-size;
        border-radius: 50%;
    }

    &__innerCircle {
        display: none;
        border-radius: 50%;
        box-sizing: border-box;
        left: 4px;
        position: absolute;
        top: 4px;
        width: $radio-size - 8px;
        height: $radio-size - 8px;

        .RadioButton--checked & {
            display: block;
        }
    }

    &__content {
        display: inline-block;
        order: 0;
        line-height: inherit;
        padding-left: $spacing-half;
        padding-right: 0;
    }
}
